import { observer, useLocalObservable } from 'mobx-react'
import styles from './index.module.less'
import Store from './store'
import { Modal } from 'antd-mobile-v2'
import { ProgressBar, Toast } from 'antd-mobile'
import BtnBotLayout from '@/components/BtnBotLayout'
import EasyModal from '@/components/EasyModal'
import { Prompt, history, useParams } from 'umi'
import { useEffect, useRef, useState } from 'react'

export default observer(() => {
    const store = useLocalObservable(() => new Store())
    const { getTest, quesInfo, current, selectedAnswer, answerData, nextQues, submitQues } = store
    const { id } = useParams<any>()
    const questionData = quesInfo?.questions?.[current - 1] || {}
    const exitFlag = useRef(false)
    const [visible, setVisible] = useState(true)

    useEffect(() => {
        document.title = quesInfo?.name || ''
    }, [quesInfo])

    useEffect(() => {
        getTest(id)

        return () => {}
    }, [])

    return (
        <div className={styles.container}>
            {/* <Prompt
                message={location => {
                    if (location.pathname.startsWith('/evaluation/result') || exitFlag.current) {
                        return true
                    }
                    Modal.alert('确定要退出测评？', '退出后测评记录将不会保存哦', [
                        {
                            text: '退出',
                            onPress: () => {
                                exitFlag.current = true
                                history.goBack()
                            },
                        },
                        {
                            text: '继续',
                            onPress: () => {},
                        },
                    ])
                    return false
                }}
            /> */}
            <BtnBotLayout
                footer={
                    <div
                        className={styles.next_btn}
                        onClick={() => {
                            if (current === quesInfo.question_count) {
                                submitQues(id)
                                return
                            }
                            if (answerData?.[questionData.id]) {
                                nextQues()
                            } else {
                                Toast.show('请先选择')
                            }
                        }}
                    >
                        {current === quesInfo.question_count ? '提交' : '下一题'}
                    </div>
                }
            >
                <div className={styles.question_container}>
                    <div className={styles.process_container}>
                        <div className={styles.process_wrapper}>
                            <span>答题进度</span>
                            <span>
                                <span className={styles.current}>{current}</span>
                                <span>/{quesInfo?.question_count || 0}</span>
                            </span>
                        </div>
                        <ProgressBar className={styles.process} percent={quesInfo?.question_count ? (current / quesInfo?.question_count) * 100 : 0} />
                    </div>
                    <div className={styles.question_wrapper}>
                        <div className={styles.question_title}>{questionData?.title}</div>
                        <div className={styles.answer_wrapper}>
                            {questionData?.options?.map((item: any) => {
                                return (
                                    <div
                                        key={item.id}
                                        className={`${styles.ans_item} ${answerData?.[item?.question_id] === item.id ? styles.active : ''}`}
                                        onClick={() => {
                                            selectedAnswer(item?.question_id, item.id)
                                        }}
                                    >
                                        <div className={`${styles.radio}`} />
                                        <div>{item?.title}</div>
                                    </div>
                                )
                            })}
                        </div>
                    </div>
                </div>
            </BtnBotLayout>
            <EasyModal
                visible={visible}
                title="填写须知"
                okText="开始测评"
                onClose={() => {
                    setVisible(false)
                }}
                onOk={() => {
                    setVisible(false)
                }}
                content="以下量表会询问最近一个月来你发生某些状况的频链。请尽量以快速、不假思索的方式据实作答，不要去思考每一题分数背后的含义，以期确时反映自己真实的压力知觉状况。虽然有些问题看上去相似，实则是有所差异，所以每一题均需作答。"
            />
        </div>
    )
})
